<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>更改手机号码</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta name="format-detection" content="telephone=no">
<script src="__PUBLIC__/wap/js/flexible.js"></script>
<link href="__PUBLIC__/wap/css/icons.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/wap/css/base.css" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/wap/css/member.css" />
</head>
<body class="login">
<div class="head">
	<a href="javascript:history.go(-1)" class="md-close back"><i class="iconfont">&#xe617</i></a>
	<a href="javascript:history.go(-1)" class="md-login floatRgt">登录</a>
	<h2>修改手机号码</h2>
</div>
<div class="page">
<form id="Form" class="mlogin" action="" method="post">
	<div class="other-link">
		请输入新的手机号码
	</div>
	<div class="field">
		<div class="label">
			手机号
		</div>
		<div class="field-control gray3">
			{$member.mobile}
		</div>
	</div>
	<div class="field">
		<div class="label">
			新手机号
		</div>
		<div class="field-control">
			<input type="text" class="input-required " name="mobile" placeholder="请输入新的手机号码" value="" id="mobile">
		</div>
	</div>
	<div class="field">
		<div class="label">
			验证码
		</div>
		<div class="field-control codeinput">
			<input type="text"  class="input-required " name="mobile_code" placeholder="请输入您收到的验证码" value="" id="mobile_code">
		</div>
			<a href="javascript:void(0);" class=" code again_message  send_sms">发送验证码
			  <span style="display: none" class="countdown"> (<em class="num">60</em>S) </span>
		    </a>
	</div>
	<div class="submit">
		<button type="submit" class="button" id="submit-btn">提 交</button>
	</div>
</form>
</div>
<script type="text/javascript" src="__PUBLIC__/wap/js/jquery.min.js"></script>
<script src="__PUBLIC__/bootstrap/vendor/jquery-validation/jquery.validate.wap.js"></script>
<script src="__PUBLIC__/js/jquery.form.js"></script>
<script type="text/javascript" src="__PUBLIC__/layer/layer.js"></script>
<script>
	jQuery(document).ready(function() {
		var code_msg="";
		$("#Form").validate({
			rules: {
				mobile: {
					required:true,
					number:true,
					minlength:11,
					remote: {
						url: "{:U('Wap/Login/cheack_mobile')}",
						type: "get",
						dataType: "json",
						data: {
							mobile: function () {
								return $("#mobile").val();　　　　//这个是取要验证的数据
							}
						},
						dataFilter: function (msg) {　　　　//判断控制器返回的内容
							if (msg == "0") {
								return true;
							}else {
								return false;
							}
						}
					}
				},

				mobile_code: {
					required:true,
					remote: {
						url: "{:U('Wap/Login/check_send_reg')}",
						type: "get",
						dataType: "json",
						data: {
							mobile: function () {
								return $("#mobile").val();　　　　//这个是取要验证的数据
							},
							mobile_code: function () {
								return $("#mobile_code").val();　　　　//这个是取要验证的数据
							}
						},
						dataFilter: function (msg) {　　　　//判断控制器返回的内容
							if (msg == "1") {
								return true;
							}else {
								return false;
							}
						}
					}
				}
			},
			messages: {
				mobile:{
					required:'<i class="iconfont">&#xe650</i>&nbsp;请输入手机号码',
					number:'<i class="iconfont">&#xe650</i>&nbsp;请输入正确的手机号码',
					minlength:'<i class="iconfont">&#xe650</i>&nbsp;请输入正确的手机号码',
					remote:'<i class="iconfont">&#xe650</i>&nbsp;手机号码已注册'
				},
				mobile_code: {
					required:'<i class="iconfont">&#xe650</i>&nbsp;请输入验证码',
					remote:'<i class="iconfont">&#xe650</i>&nbsp;验证码不正确'
				}
			},
			focusInvalid:false,
			success: function(label) {
				// set  as text for IE 
				// alert('ok'); 
				//label.html(" ").addClass("checked"); 
			},
			/*执行ajaxsubmit  */
			submitHandler: function(editform) {

				var options = {
					url :  "<?php echo U('Wap/Member/set_mobile'); ?>",
					type : "post" ,
					dataType:'json',
					target : "#loader",
					error: function(){layer.msg("服务器没有返回数据，可能服务器忙，请重试",{icon:5});},
					onwait : "正在处理信息，请稍候...",
					success: function(response){
						// console.log(response);
						//$("#loader").fadeIn(500).html(response.data).fadeOut(500); 
						//$('#editform').hide(2000); 
						if(response.status==1){
							//alert("注册成功");
							layer.msg('修改成功', {icon: 6},function(){
								//关闭后的操作
								window.location.href="<?php echo U('Wap/member/basic'); ?>";
							});
						}else{
							layer.msg(response.error, {icon: 5});
							// alert(response.error);
						}
					}
				};
				setTimeout((function(opt){
					return function(){
						$('#Form').ajaxSubmit(opt);
					}
				})(options), 300);
				return false;
			}

		});

		$('.send_sms').click(function(){
			var is_send=$(this).hasClass('disable');
			if(is_send){
				return false;
			}else{
				//短信发送
				$.ajax({
					url: "{:U('Wap/member/send_sms')}",
					type: "get",
					dataType: "json",
					data: {
						mobile: function () {
							return $("#mobile").val();　　　　//这个是取要验证的数据
						}/*,
						 verify_code: function () {
						 return $("#verify_code").val();　　　　//这个是取要验证的数据
						 }*/
					},
					success: function (msg) {　　　　//判断控制器返回的内容
						if (msg.status == "1") {
							//disable
							// $('#mobile_code').val(msg.code);
							// alert("验证码发送成功");
							layer.msg('验证码发送成功', {icon: 6});
							run_time_out();
						}else {
							// alert(msg.msg);
							layer.msg(msg.msg, {icon: 5});
						}
					}
				});
			}
		});

	});
	function run_time_out(){
		var num=$('.num').html();
		num=parseInt(num);
		var is_send=$('.send_sms').hasClass('disable');
		if(num>0){
			$('.get_sms').hide();
			$('.countdown').show();
			$('.send_sms').css('cssText','background-color: #eee;color: #666;-webkit-appearance: none;');
			num--;
			$('.num').html(num);//显示倒计时
			if(!is_send){
				$('.send_sms').addClass('disable');///禁止点击
			}
		}else{
			$('.countdown').hide();
			$('.get_sms').show();
			$('.num').html(60);//初始化倒计时
			$('.send_sms').removeClass('disable');///可以点击
			$('.send_sms').removeAttr('style');
			return false;
		}
		setTimeout('run_time_out()',1000);
	}
</script>
</body>
</html>